<script setup lang="ts">

import {InfoFilled,Plus} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {reqCertificatesType, reqGetUserinfo, reqUserAuth} from "@/api/user";
import {CertificationArr, CertificationTypeResponseData, UserInfoResponseData, UserParams} from "@/api/user/type.ts";
import {ElMessage} from "element-plus";
let upload=ref();
let form = ref();
let userInfo:any = ref<any>({});
let arrType = ref<CertificationArr>([])
let params = reactive<UserParams>({
  certificatesNo: '',
  certificatesType: '',
  certificatesUrl: '',
  name: ''
});
let dialogVisible = ref(false);
onMounted(()=>{
  getType();
  getUserInfo();
})
const getUserInfo= async ()=>{
 let result:UserInfoResponseData = await reqGetUserinfo();
 if(result.code==200){
   userInfo.value = result.data;
 }
}
const getType = async ()=>{
  let result:CertificationTypeResponseData = await reqCertificatesType();
  if(result.code==200){
    arrType.value = result.data;
  }
}
const  exceedhandler = ()=>{
  ElMessage({
    type:'error',
    message:'只能上传一张图片'
  })
}
const successhandler =(response:any,uploadFile:any,uploadFiles:any)=>{
    params.certificatesUrl=response.data;
    form.value.clearValidate('certificatesUrl')
}

const handlerPictureCardPreview = ()=>{
dialogVisible.value=true;
}
const handlerRemove =()=>{
  params.certificatesUrl='';
}
const reset =()=>{
  upload.value.clearFiles();
  Object.assign(params,{
    certificatesNo: '',
    certificatesType: '',
    certificatesUrl: '',
    name: ''
  });
}

const submit =async ()=>{
  let result = await form.value.validate();
  try{
    await reqUserAuth(params);
    getUserInfo();
    ElMessage({
      type:'success',
      message:'认证成功'
    })
  }catch (error){
    ElMessage({
      type:'error',
      message:'认证失败'
    })
  }

}
//自定义姓名校验规则方法
const validatorName =(rule:any,value:any,callBack:any)=>{
  const reg = /^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/;
  if(reg.test(value)){
    callBack();
  }else{
    callBack(new Error('请输入正确中国人的名字'))
  }
}
const validatorType =(rule:any,value:any,callBack:any)=>{
  if(value=='10'||value=='20'){
    callBack();
  }else{
    callBack(new Error('请选择正确的证件类型'))
  }
}
const validatorUrl =(rule:any,value:any,callBack:any)=>{
  if(value.length){
    callBack();
  }else{
    callBack(new Error('请上传证件照'))
  }
}
const validatorNo =(rule:any,value:any,callBack:any)=>{
  const sfz = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  const hkb=/(^\d{15}$)/;
  if(sfz.test(value)||hkb.test(value)){
    callBack();
  }else{
    callBack(new Error('请输入正确的身份证或户口本号'))
  }
}
const  rules ={
  name: [{
    required:true,
    validator:validatorName
  }],
  certificatesNo: [{
    required:true,
    validator:validatorNo
  }],
  certificatesType: [{
    required:true,
    validator:validatorType
  }],
  certificatesUrl: [{
    required:true,
    validator:validatorUrl
  }],
}
</script>

<template>
<!-- 实名认证组件的结构 -->
<el-card class="box-card">
<!-- 卡片的头部 -->
  <template #header>
    <div class="card-header">
      <span>实名信息</span>
      <el-button class="button" text></el-button>
    </div>
  </template>
<!-- 实名认证结果的提示部分 -->
  <div class="tip" style="color: #7f7f7f">
    <p><el-icon><InfoFilled></InfoFilled></el-icon>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证</p>
  </div>
<!-- 卡片身体的底部：认证成功的结构、认证未成功的结构 -->
  <el-descriptions v-if="userInfo.authStatus==1"
      class="margin-top"
      :column="1"
      border style="margin: 20px auto" size="small"
  >
    <el-descriptions-item label-align="center" :width="20">
      <template #label>
        <div class="cell-item">
          用户姓名
        </div>
      </template>
      {{userInfo.name}}
    </el-descriptions-item >
    <el-descriptions-item label-align="center" :width="20">
      <template #label>
        <div class="cell-item">
          证件类型
        </div>
      </template>
      {{userInfo.certificatesType}}
    </el-descriptions-item>
    <el-descriptions-item label-align="center" width="20px">
      <template #label>
        <div class="cell-item">
          证件号
        </div>
      </template>
      {{userInfo.certificatesNo}}
    </el-descriptions-item>

  </el-descriptions>
<!-- 用户未认证的结构 -->
  <el-form style="width: 60%;margin: 20px auto" label-width="80" v-if="userInfo.authStatus==0" :model="params" :rules="rules" ref="form">
    <el-form-item label="用户姓名" prop="name">
      <el-input placeholder="请输入用户姓名" v-model="params.name"></el-input>
    </el-form-item>
    <el-form-item label="证件类型" prop="certificatesType">
      <el-select style="width: 100%" placeholder="请选择证件类型" v-model="params.certificatesType">
        <el-option :label="item.name" :value="item.value" v-for="(item,index) in arrType" :key="index"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="证件号" prop="certificatesNo">
      <el-input placeholder="请输入证件号" v-model="params.certificatesNo"></el-input>
    </el-form-item>
    <el-form-item label="上传证件" prop="certificatesUrl">
      <el-upload
          ref="upload"
          list-type="picture-card"
          action="/api/oss/file/fileUpload"
          limit="1"
          :on-exceed="exceedhandler"
          :on-success="successhandler"
          :on-preview="handlerPictureCardPreview"
          :on-remove="handlerRemove"

      >
        <img style="width: 100%;height: 100%" src="//img.114yygh.com/static/web/auth_example.png">
<!--        <el-icon><Plus /></el-icon>-->
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full v-if="params.certificatesUrl" style="width: 100%;height: 100%" alt="Preview Image" :src="params.certificatesUrl" />
      </el-dialog>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" @click="submit">提交</el-button>
      <el-button type="primary" size="default" @click="reset">重写</el-button>
    </el-form-item>
  </el-form>
</el-card>
</template>

<style scoped lang="scss">
.box-card{
  .tip{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
